<template>
  <div>
    <input name="firstName" v-model="firstName" />
    <input name="firstName" v-model="lastName" />
    <div>full name: {{ fullName }}</div>
    <div>other name: {{ otherName }}</div>
    <button @click="changeOtherName">改变</button>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('zhang')
const lastName = ref('san')
const fullName = computed(() => {
  return firstName.value + '-' + lastName.value
})
const otherName = computed({
  get() {
    return firstName.value + '-' + lastName.value
  },
  set(val) {
    const [str1, str2] = val.split('-')
    firstName.value = str1
    lastName.value = str2
  }
})
const changeOtherName = () => {
  otherName.value = 'li-si'
}
</script>

<style lang="scss" scoped></style>
